<template>
    <example :template-code="templateString">
        <template #describe>
            <t :id="`${$t('只返回选中节点的值')}`">{{ $t('只返回选中节点的值') }}</t>
            <li>
                若配置<span class="s-code">emitPath</span>为<span class="s-code">true</span>，那么在选中节点数据后，只返回最底层的叶子节点对应的唯一键作为
                <span class="s-code">v-model</span>的绑定值；此时，若级联选择器为单选模式，则<span class="s-code">v-model</span>绑定值的类型为<span class="s-code">String | Number</span>，
                其他情况下，其绑定值均为<span class="s-code">Array</span>
            </li>
            <li>
                下拉选项相关字段名称及部分特殊配置项可以通过<span class="s-code">optionProps</span>对象来指定
            </li>
        </template>
        <div style="width: 300px;color:#666;">
            <sib-item v-model="value" :props="props" @change="change"></sib-item>
        </div>
        <div style="color:#666;">
            <p>v-model 绑定值：{{ value }}</p>
        </div>
    </example>
</template>

<script>
import { ref, reactive } from 'vue';

export default {
    setup() {
        const options = [
            {
                name: 'IT研发',
                code: '001',
                data: [
                    {
                        name: '前端组',
                        code: '001-1',
                        data: [
                            {
                                name: '飞天老李',
                                code: '001-1-1',
                            },
                            {
                                name: '法外狂徒张三',
                                code: '001-1-2',
                            },
                        ],
                    },
                    {
                        name: '后端组',
                        code: '001-2',
                        data: [
                            {
                                name: '带薪拉屎老六',
                                code: '001-2-1',
                            },
                            {
                                name: '芜湖起飞大司马',
                                code: '001-2-2',
                            },
                        ],
                    },
                ],
            },
        ];

        const value = ref('001-1-2');
        const props = reactive({
            type: 'cascader',
            options,
            optionProps: {
                emitPath: false,
                label: 'name',
                value: 'code',
                children: 'data',
            },
        });
        const change = (data) => {
            console.log('data: ', data);
        };

        return {
            props,
            value,
            change,
            templateString: `<template>
    <sib-item v-model="value" :props="props" @change="change"></sib-item>
    <p>v-model 绑定值：{{ value }}</p>
</template>

<script>
import { ref, reactive } from 'vue';

export default {
    setup() {
        const options = [
            {
                name: 'IT研发',
                code: '001',
                data: [
                    {
                        name: '前端组',
                        code: '001-1',
                        data: [
                            {
                                name: '飞天老李',
                                code: '001-1-1',
                            },
                            {
                                name: '法外狂徒张三',
                                code: '001-1-2',
                            },
                        ],
                    },
                    {
                        name: '后端组',
                        code: '001-2',
                        data: [
                            {
                                name: '带薪拉屎老六',
                                code: '001-2-1',
                            },
                            {
                                name: '芜湖起飞大司马',
                                code: '001-2-2',
                            },
                        ],
                    },
                ],
            },
        ];

        const value = ref('001-1-2');
        const props = reactive({
            type: 'cascader',
            options,
            optionProps: {
                emitPath: false,
                label: 'name',
                value: 'code',
                children: 'data',
            },
        });
        const change = (data) => {
            console.log('data: ', data);
        };

        return { props, value, change };
    },
};
<\/script>`,
        };
    },
};
</script>
